import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Divider } from '@material-ui/core';
import { Section, SectionAlternate } from 'components/organisms';
import {
  Categories,
  Courses,
  Hero,
  Reviews,
  Banner,
} from './components';

import {
  courseCategories,
  reviews,
} from './data';
import { callGetApi } from 'utils/networking';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
  coursesSection: {
    //maxWidth: 800,
    margin: '0 auto',
  },
  paddingBottom0: {
    paddingBottom: 0,
  },
  sectionAlternate: {
    background: 'transparent',
    backgroundImage: `linear-gradient(180deg, ${theme.palette.background.paper} 40%, ${theme.palette.primary.dark} 0%)`,
  },
}));

const scrollTo = id => {
  console.log('scrolled')
  setTimeout(() => {
    const element = document.querySelector(`#${id}`);
    if (!element) {
      return;
    }

    window.scrollTo({ left: 0, top: element.offsetTop, behavior: 'smooth' });
  });
};

const CommunityCategory = () => {
  const classes = useStyles();
  const dispatch = useDispatch();

  const [categoryList, setCategoryList] = useState([]);

  useEffect(() => {
    getServerSideProps()
  }, [])

  const getServerSideProps = async () => {
    callGetApi('blog/blog_categories', dispatch, (data) => {
      setCategoryList(data);
    })
  }

  return (
    <div>
      <Banner />
      <Hero
        onButtonClick={(e) => {
          e.stopPropagation()
          scrollTo('courses')
        }} />
      <SectionAlternate id="courses">
        <Categories data={categoryList} />
      </SectionAlternate>
      {/* <Section className={classes.paddingBottom0}>
        <Reviews data={reviews} />
      </Section> */}
      <div style={{ height: "100px" }}></div>
    </div>
  );
};

export default CommunityCategory;
